<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }
      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>
    
    <h1>My shopping list</h1>
    <form>
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button  onclick="addItem()" type="button">Add item</button>
    </div>
   
    <ul id ='content'>
      <!-- <li><span>12312</span><button  onclick="deleteTheDom()">Delete</button></li> -->
    </ul>
    <div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button  onclick="removeAll()" type="button">清空</button>
    </div>
  </form>
    <script>
      /**
      要求：
	  1、功能需求与上周一致
	  2、参考第六章 6.2 创建对象 创建一个NSet对象
	  NSet对象允许你存储原始值的唯一值。类似与java中的Set接口
	  NSet对象是值的集合，你可以按照插入的顺序迭代它的元素。 NSet中的元素只会出现一次，即 NSet 中的元素是唯一的。
	  
	  //初始化
	  var set = new NSet();
	  //属性 NSet的集合的大小
	  size;
	  //方法
	  //向NSet对象添加一个值 返回true或false
	  add(value);
	  //判断NSet是否包含值 返回true或false
	  has(value);
	  //根据索引返回对应的值 返回值
	  get(index);
	  //删除NSet中保存的值
	  remove(value);
	  //清空NSet保存的值
	  clear();
	  //返回NSet中保存的值的字符串，与插入的顺序保持一致，字符串以 ,(英文逗号) 分隔，空则返回空字符串
	  toString();

	  3、使用第11章DOM扩展api及自定义的NSet类型 完成
      **/
	  function NSet(){
		  this.itemList=[];
	  }
	  
	  NSet.prototype={
		  constructor:NSet,//
		  size:function(){
			  return this.itemList.length;
		  },
		  add:function(xxx){
			  if(!this.has(xxx)){
				  this.itemList.push(xxx);
				  return true;
			  }
			  return false;
		  },
		  has:function(xxx){
			  return this.itemList.includes(xxx);
		  },
		  get:function(index){
			  return this.itemList[index];
		  },
		  remove:function(xxx){
			  if(this.has(xxx)){
				  this.itemList.splice(this.itemList.indexOf(xxx),1);
			  }
		  },
		  clear:function(){
			  this.itemList=[];
		  },
		  toString:function(){
			  return this.itemList.toString();
		  }
		  
	  }
	  var ns = new NSet();
	  
			  function addItem(){debugger;
              var item = document.querySelector("#item");
              var value = item.value.trim();
              if(value==""){
                alert("非空");
                return;
              }
              item.value="";
      
              var split = value.split("#");
              var lis ='';
              
              for(var i =0,len= split.length;i<len;i++){
                var tmp = split[i].trim();
                if(tmp!==""){
                  if(ns.add(tmp)){
                    lis += '<li><span>'+tmp+'</span><button  onclick="deleteTheDom(this)" type="button">Delete</button></li>';
                  }
                }
              }
      
              if(lis!=''){
                document.querySelector("#content").insertAdjacentHTML("beforeend",lis);
                console.log(ns.toString());
                document.querySelector("#cotent").innerHTML=ns.toString();
              }
              
            }
      
            function deleteTheDom(_ob){
              //_ob指向当前节点
              var text = _ob.parentElement.firstChild.firstChild.nodeValue.trim();
              _ob.parentElement.parentElement.removeChild(_ob.parentElement);
              ns.remove(text);
              document.querySelector("#cotent").innerHTML=ns.toString();
            }
            
            function removeAll(){
              ns.clear();
              document.querySelector("#content").innerHTML="";
              document.querySelector("#cotent").innerHTML="";
            }
    </script>
  </body>
</html>